<% layout('/layouts/default.html', {title: '查看详情', libs: ['validate','fileupload','dataGrid']}){ %>
<div class="main-content">
	<div class="box box-main">
			<div class="box-body">
				<div class="form-unit">${text('支付信息')}</div>
				<#form:hidden path="id"/>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								</span> ${text('支付方式')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<span>${natatoriumOrder.payType}</span>
							</div>
						</div>
					</div>
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								</span> ${text('支付单号')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<span>${natatoriumOrder.payNumber}</span>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								${text('支付时间')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<span>${natatoriumOrder.payDate, dateFormat="yyyy-MM-dd hh:mm:ss"}</span>
							</div>
						</div>
					</div>						
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								${text('应付')}：<i class="fa icon-question hide"></i></label>
							<div class="col-sm-8">
								<span>${natatoriumOrder.shouldPay}</span>							
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								${text('实付')}：</label>
							<div class="col-sm-8">
								<span>${natatoriumOrder.actualPay}</span>
							</div>							
						</div>
					</div>			
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								${text('实收')}：</label>
							<div class="col-sm-8">
								<span>${natatoriumOrder.actualHandle}</span>
							</div>							
						</div>
					</div>			
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								${text('可结算金额')}：</label>
							<div class="col-sm-8">
								<span>${natatoriumOrder.shouldSettlement}</span>
							</div>							
						</div>
					</div>			
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								${text('已结算金额')}：</label>
							<div class="col-sm-8">
								<span>${natatoriumOrder.actualSettlement}</span>
							</div>							
						</div>
					</div>	
				</div>
					<#form:hidden path="creditTrainStatus"/>
				<div class="form-unit">${text('商品信息')}</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								${text('购买渠道')}：</label>
							<div class="col-sm-8">
								<span>${natatoriumOrder.natatoriumInfo.name}</span>
							</div>							
						</div>
					</div>			
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								${text('地址')}：</label>
							<div class="col-sm-8">
								<span>${natatoriumOrder.natatoriumInfo.address}</span>
							</div>							
						</div>
					</div>	
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								${text('商品名称')}：</label>
							<div class="col-sm-8">
								<span>${natatoriumOrder.natatoriumGoods.name}</span>
							</div>							
						</div>
					</div>			
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								${text('商品类型')}：</label>
							<div class="col-sm-8">
								<span>${natatoriumOrder.natatoriumGoods.goodsType}</span>
							</div>							
						</div>
					</div>	
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								${text('单价')}：</label>
							<div class="col-sm-8">
								<span>${natatoriumOrder.natatoriumGoods.price}元</span>
							</div>							
						</div>
					</div>			
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								${text('数量')}：</label>
							<div class="col-sm-8">
								<span>${natatoriumOrder.buyNumber}</span>
							</div>							
						</div>
					</div>	
				</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								${text('小计')}：</label>
							<div class="col-sm-8">
								<span style="color:red;cursor: pointer;">${natatoriumOrder.shouldPay}</span>元
							</div>							
						</div>
					</div>			
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								${text('使用期限')}：</label>
							<div class="col-sm-8">
								<span>${natatoriumOrder.natatoriumGoods.useFinishTime, dateFormat="yyyy-MM-dd"}</span>
							</div>							
						</div>
					</div>	
				</div>
				<div class="form-unit">${text('用户信息')}</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								${text('用户id')}：</label>
							<div class="col-sm-8">
								<span >${natatoriumOrder.sysUserId}</span>
							</div>							
						</div>
					</div>			
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								${text('用户手机')}：</label>
							<div class="col-sm-8">
								<span>${natatoriumOrder.payerPhone}</span>
							</div>							
						</div>
					</div>	
				</div>				
				<div class="form-unit">${text('核销信息')}</div>
				<div class="row">
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								${text('核销人')}：</label>
							<div class="col-sm-8">
								<span>${natatoriumOrder.verifyPerson}</span>
							</div>							
						</div>
					</div>			
					<div class="col-xs-6">
						<div class="form-group">
							<label class="control-label col-sm-4" title="">
								${text('核销时间')}：</label>
							<div class="col-sm-8">
								<span>${natatoriumOrder.verifyDate, dateFormat="yyyy-MM-dd HH:mm:ss"}</span>
							</div>							
						</div>
					</div>	
				</div>
				<div class="form-unit">${text('学员信息')}</div>
				<div class="row">
					<div class="col-xs-12">
						<div class="form-group">
							<div class="col-sm-12">
								<table id="dataGrid"></table>
							</div>
						</div>
					</div>
				</div>									
			</div>
			<div class="box-footer">
				<div class="row">
					<div class="col-sm-offset-2 col-sm-10">
						<button type="button" class="btn btn-sm btn-primary" id="verification"><i class="fa fa-check"></i> ${text('核销')}</button>&nbsp;
						<button type="button" class="btn-cancel" id="btnCancel" onclick="js.closeCurrentTabPage()">${text('返回')}</button>
					</div>
				</div>
			</div>
	</div>
</div>
<% } %>
<script id="verification_html" type="text/template">
  <div>
	<div class="row">
		<div class="col-xs-12">
			<div class="form-group" style="text-align:center">
				<label style="margin-left:auto;margin-right:auto;">确定核销该订单？</label>
			</div>
		</div>
	</div>
  </div>
</script>

<script>
$(document).ready(function() {
	var natatoriumOrderId = '${natatoriumOrder.id}';
	
	if(natatoriumOrderId!=''){
		$.ajax({
			url: "${ctx}/natatoriumorder/natatoriumOrder/creditRatingEventListData",
	        type: "post",
	        contentType: "application/x-www-form-urlencoded",
	        data: {
	        	'natatoriumOrderId': natatoriumOrderId
	        },
	        xhrFields: {
	            withCredentials: true
	        },
	        success: function (result) {
	        	orderStudentList = JSON.parse(result);
				if (orderStudentList.data) {
					renderTable(orderStudentList.data);
				}
	        },
	        error: function (e) {
	        	console.log('e',e)
	        }
		})
	} else {
		renderTable();
	}
	
	//核销
	$("#verification").click(function() {
		js.layer.open({
		  type: 1,
		  title: "核销",
		  btn:["确定"],
		  area: ['300px', '130px'],
		  shadeClose: true, //开启遮罩关闭
		  content: $("#verification_html").html(),
		  yes: function(index, layero) {
		    var data = {
		    	'natatoriumOrderId': natatoriumOrderId,
		    }
		    $.ajax({
				url: "${ctx}/natatoriumorder/natatoriumOrder/verification",
		        type: "post",
		        contentType: "application/x-www-form-urlencoded",
		        data:  data,
		        xhrFields: {
		            withCredentials: true
		        },
		        success: function (data) {
		        	js.showMessage(JSON.parse(data).message);
		        	js.closeCurrentTabPage(function(contentWindow){
	  					contentWindow.page();
	  				});
		        },
		        error: function (e) {
		        	console.log('e',e)
		        }
			})
		  }
		})
	})	
})

function renderTable(arr) {
	$('#dataGrid').dataGrid({
		data: arr,
	  	datatype: "local",
	  	autoGridHeight: function(){return 'auto'}, // 设置自动高度
	  	showRownum: false,
	  	autoGridWidth: false,
		columnModel: [		
			{header:'${text("学员姓名")}', editable:false, name:'name', align:"center"},		
			{header:'${text("手机号")}', name:'phone', editable:false, edittype:'text', width:300, align:"center", editoptions:{'maxlength':'500', 'class':'form-control required','style': 'background: #fff;'}},
			{header:'${text("性别")}', name:'sex', editable:false, edittype:'text', width:300, align:"center", editoptions:{'maxlength':'500', 'class':'form-control required','style': 'background: #fff;'}},
			{header:'${text("年龄")}', name:'age', editable:false, edittype:'text', width:300, align:"center", editoptions:{'maxlength':'500', 'class':'form-control required','style': 'background: #fff;'}},
			{header:'${text("街道/小区")}', name:'address', editable:false, edittype:'text', width:150, align:"center", editoptions:{'maxlength':'200', 'class':'form-control required','style': 'background: #fff;'}}
		],
		
		// 数据加载前执行方法
	    ajaxLoad: function(data) {
	    	$("#dataGrid").dataGrid("setLabel", 'rn', '序号', {'text-center': 'center', 'vertical-align': 'middle', 'font-weight': 'normal'});
	    },
		// 加载成功后执行事件
		ajaxSuccess: function(data){
	}
	}); 
}
</script>